<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作CSS</title>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .cls{
            color:red;
        }
    </style>
    <style>

    </style>
</head>
<body>
    <div id="d1" ></div>
    <input id="btn" type="button" value="改变CSS">
    <script>
        let btn = document.getElementById("btn");
        btn.onclick = function(){
            let d1 = document.getElementById("d1");
            // style属性获取的是内嵌样式，
            // 如果样式是写在样式表中style是无法获取的
            d1.style.width = "200px";
            d1.style.border = "5px solid red";
            d1.style.backgroundColor = "yellow";
            console.log(d1.style.width);
            console.log(d1.style.height);
            console.log(d1.style.backgroundColor);

            // styleSheets：获取样式表的集合
            console.log(document.styleSheets);
            // cssRules：获取样式表中的样式规则集合
            console.log(document.styleSheets[0].cssRules);
            // 访问到样式表中的某个属性
            console.log(document.styleSheets[0].cssRules[0].style.width);
            document.styleSheets[0].cssRules[0].style.height = "500px";

            // 最终样式：渲染在页面上的样式
            // window对象中的方法getComputedStyle
            // 注意：最终样式只能读取，不能修改
            console.log(getComputedStyle(d1).width);
            console.log(getComputedStyle(d1).height);
            console.log(getComputedStyle(d1).border);
            console.log(getComputedStyle(d1).backgroundColor);
        }
    </script>
</body>
</html>